import { Form, Input, Button } from "antd";
import { useNavigate } from "react-router-dom";
import { UserOutlined, LockOutlined, LeftOutlined } from "@ant-design/icons";

// 导入样式
import "../entrance.scss";
import { IUserRegisterReq } from "types/userReq";
import * as userService from "services/user";

export default function Register() {
  const navigate = useNavigate();

  // 调用注册API
  const register = function (data: IUserRegisterReq) {

  };

  // 注册按钮的响应函数
  const onFinish = (data: IUserRegisterReq) => {
    console.log("注册表单提交的数据: ", data);
    register(data);
  };

  return (
    <div className="entrance-page">
      {/* 页面内容(注册表单) */}
      <div className="register entrance-content">
        <div className="form">
          <LeftOutlined
            className="go-back-icon"
            onClick={() => {
              navigate(-1);
            }}
          />
          <Form name="normal_register" onFinish={onFinish}>
            <p className="form-title">注册</p>
            <Form.Item
              name="account"
              rules={[
                { required: true, message: "请输入用户名" },
                { min: 3, message: "用户名长度至少为3位" },
                { max: 10, message: "用户名长度至多为10位" },
              ]}
            >
              <Input
                placeholder="请输入用户名"
                prefix={<UserOutlined />}
                className="form-input"
              />
            </Form.Item>

            <Form.Item
              name="account"
              rules={[
                { required: true, message: "请输入昵称" },
                { min: 1, message: "昵称长度至少为1位" },
                { max: 10, message: "昵称长度至多为10位" },
              ]}
            >
              <Input
                placeholder="请输入昵称"
                prefix={<UserOutlined />}
                className="form-input"
              />
            </Form.Item>

            <Form.Item
              name="pwd"
              rules={[
                { required: true, message: "请输入密码" },
                { min: 6, message: "密码长度至少为6位" },
              ]}
            >
              <Input
                prefix={<LockOutlined />}
                type="password"
                placeholder="请输入密码"
                className="form-input"
              />
            </Form.Item>

            <Form.Item
              name="confirmPwd"
              rules={[
                { required: true, message: "请输入确认密码" },
                { min: 6, message: "密码长度至少为6位" },
              ]}
            >
              <Input
                prefix={<LockOutlined />}
                type="password"
                placeholder="请输入确认密码"
                className="form-input"
              />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="form-button">
                注册
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}
